<template>
  <div class="c-box u-page u-general-color">
    <u-navbar :title="title" :custom-back="comeback" :background="background" :border-bottom="false" :title-bold="true"
              title-color="#040503" back-icon-color="#040503"></u-navbar>
    <div v-if="course.type == 0">
      <video :src="course.videoUrl"
             :poster="course.mainDiagram"
             :enable-danmu="false"
             :autoplay="true"
             :danmu-btn="false"
             :show-center-play-btn='true'
             :show-play-btn="true"
             :picture-in-picture-mode="['push', 'pop']"
             controls></video>
    </div>
    <div v-else>
      <div>
        <u-swiper
            :list="graphicUrlList"
            height="365"
            border-radius="0"
            @click="showOriginalImage()">

        </u-swiper>
      </div>
    </div>

    <div class="c-top c-name u-pl-20 u-pr-20">
      <div class="u-pt-10">{{ course.title ? course.title : '' }}</div>
      <!--      <div class="c-price u-pt-10">-->
      <!--        {{ video.price ? video.price : '' }}-->
      <!--      </div>-->
    </div>

    <div class="u-pl-20 u-pr-20 u-pt-10 c-content">
      <div class="u-flex u-pt-10">
        <div>{{course.category}}</div>
      </div>
      <div class="u-pt-5">
        {{course.enterpriseName}}
      </div>
      <div class="u-pt-5" style="font-size: 12px;color: #a8a8a8">
        更新于 {{ course.updateTime }}
      </div>
    </div>
    <div class="c-bottom u-pl-20 u-pr-20 u-mt-10">
      <div class="u-border-bottom u-pt-15 u-pb-15 u-title">
        <p class="x-sidebar-left">课程简介</p>
      </div>
      <div class="u-pt-15">
        <div class="u-pb-5" v-if="course.tags && course.tags.split(',').length>0">
          <u-tag
              v-for="(titem, tindex) in course.tags.split(',')"
              :key="tindex"
              :text="titem"
              type="info"
              mode="dark"
              size="mini"
              bg-color="#f7f5f8"
          ></u-tag>
        </div>
        <rich-text :nodes="course.description" user-select="true"></rich-text>
      </div>
    </div>
    <div style="height: 140rpx;"></div>
    <div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;">
      <div class="u-pt-20 u-pb-40 u-flex" style="width: 90%;margin: 0 auto;height: 80px;">
        <button class="customStyle-btn" @click="openCustomerServiceChat">
          <u-icon name="kefu-ermai" color="#000000" size="45"></u-icon>
          <span class="customStyle-btn-span">客服</span>
        </button>
        <button class="customStyle-btn" @click="gotoShare">
          <u-icon name="zhuanfa" color="#000000" size="45"></u-icon>
          <span class="customStyle-btn-span">分享</span>
        </button>
        <div style="width: 100%;">
          <u-button type="success" :custom-style="customStyle" @click="connet">
             {{course.price !== '0.00' ? '￥' + formatAmount(course.price) : ''}} 了解课程
          </u-button>
        </div>
      </div>
      <ShareBtn :docUnid="shareData.docUnid" :url="shareData.url" :route="shareData.route"
                :style="shareData.style" :type="shareData.type" :btnText="shareData.btnText" ref="sharebtn"></ShareBtn>
    </div>

    <u-modal
        ref="uModal"
        title="联系我，获取完整课程！"
        v-model="showTips"
        confirm-text="关闭"
        confirm-color="#eb5468"
        @confirm="uploadFile"
    >
      <div class="slot-content" style="text-align: left">
        <div class="modal-des"></div>
        <div style="font-size: 30rpx;color: #484747;">
          <p>联系人：{{ course.contactUser }}</p>
          <p>联系方式：{{ course.phone }}<span class="u-pl-5" style="font-size: 28rpx;color:#eb5468;"
                                         @click="copyBtn(course.phone)">复制</span></p>
        </div>
        <div class="u-cl-content u-fz-12 u-pt-10">
          <p>玫丽安全提示：</p>
          <div>
            平台严禁企业做出任何损害用户合法权益的违法违规行为，包括但不限于收取用户财物、向用户集资入股等，您一旦发现此类行为，<span class="report" @click="openCustomerServiceChat">请立即投诉</span>！
          </div>
        </div>
      </div>
    </u-modal>

  </div>
</template>

<script>
import globalData from "@/globalData";
import shareMixins from '@/mixins/share';

export default {
  mixins: [shareMixins],
  data() {
    return {
      content: '',
      showTips: false,
      OrUnid: '',
      course:{
        id:null
      },
      graphicUrlList:[],
      SceneID: '',
      KF_show: false,
      customerServiceUrl: globalData.customerService,//客服微信二维码图片地址
      KF_content_top: '',
      KF_content_bottom: '',
      CodeUrl: '',
      shareData: {
        docUnid: '',
        url: '',
        route: '',
        style: 9,
        btnText: '定制分享码',
        shareTitle: ''
      },
      title: '课程详情',
      background: {
        backgroundColor: '#f3e4e9',
      },
      customStyle: {
        background: '#eb5468 !important'
      },
    }
  },

  mounted() {

  },

  onReady() {
    // uni.hideShareMenu(); // 禁止分享好友
    // uni.hideShareTimeline(); // 禁止分享朋友圈
  },

  onPullDownRefresh() {
    // 停止Loading
    uni.stopPullDownRefresh();
  },

  onReachBottom() {
  },

  onLoad(options) {
    if (this.isNotNull(options.id)) {
      this.course.id = options.id;
      this.getCourseDetails()
    } else {
      this.showMSG('error', '出错啦！')
      setTimeout(() => {
        this.goBack()
      }, 2500)
    }
    //分享组件数据初始化
    this.shareData.docUnid = this.course.id
    this.shareData.url = '/pages_private_scene1/CourseZone/CourseDetail?id=' + this.course.id
    this.shareData.route = this.getCurrentPageUrl(this)
  },

  methods: {
    /**
     * 格式化金额 果是整数就只保留整数，如果有小数，取前两位
     * @param amountString
     * @returns {string}
     */
    formatAmount(amountString) {
      const amount = parseFloat(amountString);
      if (isNaN(amount)) {
        return "Invalid amount";
      }

      if (Number.isInteger(amount)) {
        return amount.toFixed(0);
      } else {
        return amount.toFixed(2);
      }
    },
    /**
     * 获取视频详情
     */
    async getCourseDetails() {
      let result = await this.$u.api.unifyMiniRestGet({
        systemid: "meily",
        url: `/learning/course/get/${this.course.id}`,
        loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
      });
      if (result.code == 200) {
        this.course = result.data
        if (this.course.type == 1){
          this.graphicUrlList = this.course.graphicUrl.split(",");
        }
        this.shareData.shareTitle = this.course.title
      }
    },
    /**
     * 点击查看原图
     */
    showOriginalImage(index) {
      wx.previewImage({
        current: this.graphicUrlList[index],
        urls: this.graphicUrlList,
      });
    },

    /**
     * 立即沟通
     */
    connet() {
      //登录验证
      var loginRes = this.checkLogin(1)
      if (!loginRes) {
        return false;
      }
      this.showTips = true
    },

    /**
     * 点击左下角直接分享按钮
     */
    gotoShare() {
      this.$refs.sharebtn.wakeUpPop()
    },

    /**
     * 点击联系客服
     */
    async openCustomerServiceChat() {
      let result = await this.$u.api.unifyMiniRestGet({
        systemid: "meily",
        url: "/qyapi/kf/account/url/".concat(globalData.openKfid_learning),
        loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
      });
      if (result.code == 200) {
        const pages = getCurrentPages(); // 获取栈实例
        //当前页面路径(带参数)
        let currentPage = pages[pages.length - 1]['$page']['fullPath']
        let kfUrl = result.data
        wx.openCustomerServiceChat({
          extInfo: {
            url: kfUrl
          },
          corpId: globalData.corpId,
          showMessageCard: true,
          sendMessagePath: currentPage,
          success(res) {
            console.log(res)
          }
        })
      } else {
        this.showMSG('error', '出错啦！');
      }
    },

    // 长按保存图片
    saveImg(e) {
      let url = this.CodeUrl
      //用户需要授权
      wx.getSetting({
        success: (res) => {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                // 同意授权
                this.saveImg1(url);
              },
              fail: (res) => {
                console.log(res);
              }
            })
          } else {
            // 已经授权了
            this.saveImg1(url);
          }
        },
        fail: (res) => {
          console.log(res);
        }
      })
    },

    saveImg1(url) {
      wx.getImageInfo({
        src: url,
        success: (res) => {
          let path = res.path;
          wx.saveImageToPhotosAlbum({
            filePath: path,
            success: (res) => {
              this.showMSG("success", "保存成功！")
            },
            fail: (res) => {
              console.log(res);
            }
          })
        },
        fail: (res) => {
          console.log(res);
        }
      })
    },

    //点击一键复制
    copyBtn(text) {
      wx.setClipboardData({
        //准备复制的数据内容
        data: text,
        success: function (res) {
          wx.showToast({
            title: '已复制',
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.c-box {
  /* background-color: #f7f5f5; */
}

.c-top {
  display: flex;
  justify-content: space-between;
  /* background-color: #FFFFFF; */
}

.c-content {
  color: #797979;
}

.c-bottom {
  /* background-color: #FFFFFF; */
}

.c-name {
  font-size: 38rpx;
  font-weight: 550;
}


/* 竖线 */
.x-sidebar-left {
  text-indent: 20rpx;
  line-height: 30rpx;
  border-left: 7rpx solid #eb5468;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-price {
  color: #ea4d5e;
}

.c-content-date {
  font-size: 25rpx;
}

.customStyle {
  border: none !important;
  background-color: transparent;
  padding-left: 0rpx !important;
  padding-right: 0rpx !important;
}

.customStyle::after {
  border: none;
}

.modal-des {
  text-indent: 2em;
}

.slot-content {
  font-size: 25rpx;
  color: #797979;
  padding-left: 30rpx;
  line-height: 45rpx;
  padding: 40rpx;
}

.color-blue {
  color: #3b79fe;
}

.job-name {
  width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-content2 {
  font-size: 28rpx;
  color: #bcbcbc;
  text-align: center;
  margin: 0 auto;
}

.slot-content2 img {
  height: 750rpx;
}

.aui-flex-box {
  min-width: 0;
  font-size: 14px;
  color: #333;
  width: 90rpx;
}

.report {
  color: #eb5468;
  text-decoration: underline;
}

.customStyle-btn {
  width: 50rpx;
  height: 90rpx;
  border: none !important;
  background-color: transparent;
  margin-left: 0;
  margin-right: 15rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding-left: 0rpx !important;
  padding-right: 0rpx !important;
  padding-top: 6rpx !important;
}

.customStyle-btn::after {
  border: none;
}

.customStyle-btn-span {
  font-size: 20rpx;
  color: #000000;
  line-height: 45rpx;
}
</style>
